<template>
  <!-- :style="`paddingTop:${(deviceInfo.statusBarHeight * 2) || 66}rpx;height:calc(100vh - ${(deviceInfo.statusBarHeight * 2) || 66}rpx);`" -->
  <view class="orderContent">
    <!-- 顶部占位 -->

    <!-- #ifdef APP-PLUS -->
    <view-navbar></view-navbar>
    <!-- #endif -->


    <!-- #ifdef APP-PLUS -->
    <view class="margin ms20">
      <view class="flex-cen" style="margin-top: 10rpx; margin-bottom: 16rpx">
        <!-- <img  src="/static/img/组 52332_slices/组 52332.png" alt="" > -->
        <u-icon name="arrow-left" color="" size="25" @click="back" style="margin-right: 20rpx"></u-icon>
        <u-search style="width: 624rpx" :showAction="false" placeholder="搜索疾病、症状、商品、内容" v-model="keyword"
          :clearabled="true" searchIconColor="#7976E9" borderColor="#DDDDDD" bgColor="#ffffff"></u-search>
      </view>
    </view>
    <!-- #endif -->


	
       <uni-segmented-control
      @clickItem="onClickItem"
      :current="current"
      :values="items"
      style-type="text"
      active-color="#7976E9"
    >
    </uni-segmented-control>

    <view class="orderList" v-for="(item, i) in orderList" :key="i">
      <!-- 订单详情 -->
      <!-- v-show="item.type == current" -->
      <view class="orderItem" style="background-color: #e0e0e0">
        <view class="state mb-10">
          <view class="flex">
            <view class="flex">
              <image mode="scaleToFill" class="mr5" src="/static/img/myorder/01-shangjia.png" />
              <view class="text-bold"> 某某商家 </view>
            </view>
            <view class="color_orange">
              <!-- {{setStatus(item.status) || '待付款'}} -->
            </view>
          </view>
        </view>
        <view class="orderDetail">
          <image @click="$pub.go(`/pages_my/order/order?data=${item.orderId}`)"
            src="http://storage.dezhoucloud.com/img/logo.png" mode="widthFix"></image>
          <view class="itemDetail">
            <text>{{ item.uproductName }} </text>
            <text>{{ item.uproductSpecs }} </text>
          </view>
          <view class="orderNum">
            <view class="orderPrice">
              <text class="currency">￥</text><text>{{ item.uretailPrice }} </text>
            </view>
            <text class="currency">x{{ item.count }} </text>
          </view>
        </view>
        <view class="orderBtnGroup">
          <view class="count">
            实付款<text class="currency">￥</text><text>{{ item.totalAmount }}</text>
          </view>
          <view class="flex" v-if="item.status == '1'">
            <button type="default" @click="$pub.go(`/pages_my/order/order?data=${item.orderId}`)">
              去付款
            </button>
            <view class="px-5"> </view>
          </view>
          <view class="flex" v-if="item.status == '2'">
            <button type="default">发起退款</button>
            <view class="px-5"> </view>
            <button type="default">催发货</button>
          </view>
          <view class="flex" v-if="item.status == '3'">
            <button type="default" @click="updateOrder(item.orderId, 4)">
              确认收货
            </button>
            <view class="px-5"> </view>
          </view>
          <view class="flex" v-if="item.status == '4'">
            <button type="default">评价</button>
            <view class="px-5"> </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      /* 搜索 */
      keyword: "",
      items: ["全部", "待付款", "待发货", "待收货", "已完成", "退款"],
      current: 1,
      orderList: [],
    };
  },
  onLoad: function (option) {
    if (typeof option.type != 0) {
      this.current = JSON.parse(decodeURIComponent(option.type));
      console.log(this.current, "this.current");
    }
  },
  onShow() {
    this.getOrderCate();
  },
  computed: {},
  methods: {
    setStatus(status) {
      let obj = {
        1: "待付款",
        2: "待发货",
        3: "待收货",
        4: "已完成",
        5: "已取消",
        6: "退款中",
        7: "已退款",
      };
      return obj[status];
    },
    async getOrderCate() {
      let data = {
        pageNum: 1,
        pageSize: 10,
        status: this.current,
        uproductName: this.keyword,
      };
      let re = await this.$API.orderApi.getList(data);
      this.orderList = re.records;
    },
    onClickItem(e) {
      console.log(e);
      if (this.current != e.currentIndex) {
        this.current = e.currentIndex;
        this.getOrderCate();
        console.log(this.current, "this.current");
      }
    },
    toPage(href) {
      uni.navigateTo({
        url: href,
      });
    },
    async updateOrder(orderId, status) {
      let re = await this.$API.orderApi.updateOrder(orderId, status);
      if (re) {
        this.getOrderCate();
      }
    },
    back() {
      /*uni.navigateBack({
          delta: 1
        })*/
      //@zxyuns 处理兼容，如果没有上一级界面则返回首页
      const pages = getCurrentPages();
      if (pages.length === 2) {
        uni.navigateBack({
          delta: 1,
        });
      } else if (pages.length === 1) {
        uni.switchTab({
          url: "/pages/home/home",
        });
      } else {
        uni.navigateBack({
          delta: 1,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/* #ifdef MP */
::v-deep .u-search__content__input {
  font-size: 28rpx !important;
}
::v-deep .segmented-control__text{
	font-size: 28rpx !important;
}
/* #endif */




/*  */
.orderContent {
  width: 100%;
  background-color: #fff;
}

.orderList {
  display: flex;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  padding: 10rpx;

  .orderItem {
    background-color: #fefefe;
    width: 100%;
    border-radius: 24rpx;
    padding: 22rpx;
    margin-top: 10rpx;

    .orderDetail {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 6rpx;

      image {
        width: 180rpx;
        height: 180rpx;
        border-radius: 20rpx;
      }

      .itemDetail {
        flex: 1;
        margin: 10rpx 24rpx;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        text {
          &:first-child {
            font-weight: 700;
          }

          &:last-child {
            font-size: 24rpx;
            color: #949494;
            margin-top: 20rpx;
          }
        }
      }

      .orderNum {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        color: #949494;

        .orderPrice {
          color: #000;
          margin-bottom: 20rpx;

          text:nth-child(2) {
            font-weight: 700;
            font-size: 32rpx;
          }
        }
      }
    }

    .orderBtnGroup {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-end;

      .count {
        text {
          font-weight: 600;
        }
      }

      button {
        margin-top: 20rpx;
        margin-right: 0;
      }
    }
  }
}

// image {
// 	width: 100%;
// 	height: 100%;
// 	will-change: transform;
// }
</style>